import React from 'react'
import { useTheme, type ColorType } from '@/hooks/useTheme'

interface ThemeDivProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode
  bgColor?: ColorType
  textColor?: 'white' | 'black' | 'auto'
}

/**
 * ThemeDiv 组件
 * 一个使用主题色的普通 div，可以像普通 div 一样使用
 * 
 * @param bgColor 背景颜色类型
 * @param textColor 文字颜色
 * @param children 子元素
 * @param className 额外的 CSS 类名
 * @param style 额外的样式
 * @param ...props 其他 div 属性
 */
export default function ThemeDiv({ 
  children, 
  bgColor, 
  textColor,
  className = '',
  style,
  ...props 
}: ThemeDivProps) {
  const { colors } = useTheme()
  
  // 根据背景颜色类型获取对应的颜色值
  const getBackgroundColor = () => {
    if (!bgColor) return undefined
    return colors[bgColor]
  }
  
  // 根据文字颜色类型获取对应的文字颜色
  const getTextColorClass = () => {
    if (!textColor) return ''
    
    switch (textColor) {
      case 'black':
        return 'text-black'
      case 'white':
        return 'text-white'
      case 'auto':
      default:
        return '' // 使用默认文字颜色
    }
  }
  
  const backgroundColor = getBackgroundColor()
  const textColorClass = getTextColorClass()
  
  return (
    <div
      className={`${textColorClass} ${className}`}
      style={{
        ...(backgroundColor && { backgroundColor }),
        ...style
      }}
      {...props}
    >
      {children}
    </div>
  )
} 